<!--企业评估结果管理-->
<template>
  <div class="page">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="一组" name="first">
        <div class="top-search">
          <div class="top-search-item">
            <el-button type="primary">新增</el-button>
          </div>
          <div class="top-search-item">
            <el-button type="danger">删除</el-button>
          </div>
          <div class="top-search-item">
            <el-button type="success">保存</el-button>
          </div>
          <div class="top-search-item">
            <el-button type="danger">清除现场数据</el-button>
          </div>
          <div class="top-search-item">
            <el-button type="danger">清除管理数据</el-button>
          </div>
          <div class="top-search-item">
            <el-button type="primary">更新选中数据</el-button>
          </div>
          <div class="top-search-item">
            <el-button type="primary">更新全部数据</el-button>
          </div>
          <div class="top-search-item">
            <el-button type="primary">导出数据</el-button>
          </div>
          <div class="top-search-item">
            <el-button type="primary">计算隐患数量</el-button>
          </div>
          <div class="top-search-item">
            <el-input placeholder="请输入评估名称关键字" />
          </div>
          <div class="top-search-item">
            <el-button type="primary">检索</el-button>
          </div>
        </div>
        <div class="content">
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              width="55"
            />
            <el-table-column
              label="序号"
              align="center"
            />
            <el-table-column
              label="评估名称"
              align="center"
            />
            <el-table-column
              label="企业名称"
              align="center"
            >
              <template slot-scope="scope">
                <div class="text-green" @click="comDialogHandleClick(scope.row)">
                  {{ scope.row.com }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="隐患数量"
              align="center"
            />
            <el-table-column
              label="处罚情况"
              align="center"
            />
            <el-table-column
              label="风险评估结果"
              align="center"
            >
              <el-table-column
                label="考评分"
                align="center"
              />
              <el-table-column
                label="风险评估分值"
                align="center"
              />
            </el-table-column>
            <el-table-column
              label="现场风险评估"
              align="center"
            >
              <el-table-column
                label="现场评估分值"
                align="center"
              />
              <el-table-column
                label="现场系数"
                align="center"
              />
            </el-table-column>
            <el-table-column
              label="安全管理评估"
              align="center"
            >
              <el-table-column
                label="管理评估总分"
                align="center"
              />
              <el-table-column
                label="管理评估分值"
                align="center"
              />
              <el-table-column
                label="管理系数"
                align="center"
              />
            </el-table-column>
            <el-table-column
              label="现场风险评估名称"
              align="center"
              width="140"
            />
          </el-table>
        </div>
        <div class="page">
          <el-pagination
            :current-page="currentPage"
            :page-size="20"
            layout="total, prev, pager, next, jumper"
            :total="0"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="二组" name="second">
        <div class="top-search">
          <div class="top-search-item">
            <el-button type="primary">新增</el-button>
          </div>
          <div class="top-search-item">
            <el-button type="danger">删除</el-button>
          </div>
          <div class="top-search-item">
            <el-button type="success">保存</el-button>
          </div>
          <div class="top-search-item">
            <el-button type="danger">清除现场数据</el-button>
          </div>
          <div class="top-search-item">
            <el-button type="danger">清除管理数据</el-button>
          </div>
          <div class="top-search-item">
            <el-button type="primary">更新选中数据</el-button>
          </div>
          <div class="top-search-item">
            <el-button type="primary">更新全部数据</el-button>
          </div>
          <div class="top-search-item">
            <el-button type="primary">导出数据</el-button>
          </div>
          <div class="top-search-item">
            <el-button type="primary">计算隐患数量</el-button>
          </div>
          <div class="top-search-item">
            <el-input placeholder="请输入评估名称关键字" />
          </div>
          <div class="top-search-item">
            <el-button type="primary">检索</el-button>
          </div>
        </div>
        <div class="content">
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              width="55"
            />
            <el-table-column
              label="序号"
              align="center"
            />
            <el-table-column
              label="评估名称"
              align="center"
            />
            <el-table-column
              label="企业名称"
              align="center"
            />
            <el-table-column
              label="隐患数量"
              align="center"
            />
            <el-table-column
              label="处罚情况"
              align="center"
            />
            <el-table-column
              label="风险评估结果"
              align="center"
            >
              <el-table-column
                label="考评分"
                align="center"
              />
              <el-table-column
                label="风险评估分值"
                align="center"
              />
            </el-table-column>
            <el-table-column
              label="现场风险评估"
              align="center"
            >
              <el-table-column
                label="现场评估分值"
                align="center"
              />
              <el-table-column
                label="现场系数"
                align="center"
              />
            </el-table-column>
            <el-table-column
              label="安全管理评估"
              align="center"
            >
              <el-table-column
                label="管理评估总分"
                align="center"
              />
              <el-table-column
                label="管理评估分值"
                align="center"
              />
              <el-table-column
                label="管理系数"
                align="center"
              />
            </el-table-column>
            <el-table-column
              label="现场风险评估名称"
              align="center"
              width="140"
            />
          </el-table>
        </div>
        <div class="page">
          <el-pagination
            :current-page="currentPage"
            :page-size="20"
            layout="total, prev, pager, next, jumper"
            :total="0"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 选择企业弹窗 -->
    <el-dialog
      title="选择企业"
      :visible.sync="comDialogVisible"
      width="30%"
    >
      <div class="top-search">
        <div class="top-search-item">
          <el-button type="primary">确定</el-button>
        </div>
        <div class="top-search-item">
          <el-button type="info">取消</el-button>
        </div>
        <div class="top-search-item">
          <el-input placeholder="请输入企业名称关键字" />
        </div>
        <div class="top-search-item">
          <el-button type="primary">检索</el-button>
        </div>
      </div>
      <div class="content-dialog">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column
            align="center"
            label="企业名称"
          />
          <el-table-column
            align="center"
            label="负责人"
          />
          <el-table-column
            align="center"
            label="联系电话"
          />
          <el-table-column
            align="center"
            label="备注"
          />
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="comDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="comDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          com: 'XX'
        }
      ],
      multipleSelection: [],
      currentPage: 1,
      activeName: 'first',
      comDialogVisible: false
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    comDialogHandleClick() {
      this.comDialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  padding: 1rem;

  .top-search {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;

    .top-search-item {
      margin-right: 1rem;
    }
  }

  .content {
    margin-top: 2rem;
    width: 100%;
    height: 40rem;
  }
}
.text-green {
  color: #67C23A;
  cursor: pointer;
}
</style>
